<template>
  <div class="pagination">
    <div class="page-left">
      <span>共{{ this.pageTotal}}条数据</span>
      <span>每页:</span>
      <number-input
        v-model="pageSize"
        :int="true"
        class="page-list-input"
        @keyup.native.enter="sizeChange"
      ></number-input>
      <span>条</span>
    </div>
    <el-pagination
        background
        layout="prev, pager, next, jumper"
        :page-size="currentSize"
        :total="pageTotal"
        @current-change="handleCurrentChange"
        :current-page.sync="pageCurrent"
      ></el-pagination>
  </div>
</template>
<script>
import NumberInput from "@/components/NumberInput";
export default {
  components: {
    NumberInput
  },
  data() {
    return {
      currentSize: 5
    };
  },
  props: {
    size: {
      type: [Number, String],
      default: 5,
      required: true
    },
    current: {
      type: Number,
      default: 5,
      required: true
    },
    total: {
      default: 0,
      type: Number,
      required: true
    }
  },
  computed: {
    pageTotal() {
      return this.total;
    },
    pageSize: {
      get() {
        return this.size;
      },
      set(e) {
        this.$emit("update:size", e);
      }
    },
    pageCurrent: {
      get() {
        return this.current;
      },
      set(e) {
        this.$emit("update:current", e);
      }
    }
  },
  created() {
    this.currentSize = this.size;
  },
  methods: {
    sizeChange(e) {
      this.pageSize = e.target.value;
      this.currentSize = this.size - 0;
      this.pageCurrent = 1;
      this.$emit("change");
    },
    handleCurrentChange(e) {
      this.pageCurrent = e;
      this.$emit("change");
    }
  }
};
</script>

<style lang="scss">
.pagination {
  padding: 32px 0 44px 23px;
  .page-list-input {
    display: inline-block;
    width: 32px;
    padding: 2px 4px;
    border-radius: 4px;
    border: none;
    border: 1px solid #ccc;
    outline: none;
  }
  .page-left {
    font-size: 12px;
    display: inline-block;
    .el-input--suffix {
      width: 56px;
    }
  }
}
</style>




